<template>

    <div class="container">
        <div class="row">
            <div class="col-8">
                <div class="card" style="margin-top: 20px; height: 800px;">
                    <div class="card-body">
                        <h4 style="text-align:center">游戏规则</h4>
                        <h5>可以用wasd控制蛇的移动,尽量避免蛇头碰撞到障碍物和自身</h5>
                        <h5>对于代码规范,请用以下模板进行编译,最后请返回0,1,2,3,因为0,1,2,3,代表蛇上下左右移动</h5>
                        <hr>
                        <h6>package com.ssw.botruningsystem.utils;</h6>
                        <h6>public class Bot implements java.util.function.Supplier { return 0;}</h6>
                        <hr>
                        <h5 style="text-align:center">提示</h5>
                        <p>五子棋暂时只能单机</p>
                    </div>
                </div>
            </div>
            <div class="col-4">
                <!-- <div class="card" style="margin-top: 20px;">
                    <div class="card-body">
                        <button v-if="$store.state.background.status === 'light'" @click="light">黑夜</button>
                        <button v-if="$store.state.background.status === 'dark'" @click="dark">白昼</button>
                    </div>
                </div> -->
                <div class="card" style="margin-top: 20px;">
                    <div class="card-body">
                        <h4 style="text-align:center">排行榜</h4>
                        <table class="table table-light table-hover">
                            <thead>
                                <tr>
                                    <th>玩家</th>
                                    <th>天梯分</th>

                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="user in users" :key="user.id">
                                    <td>
                                        <img :src="user.photo" alt="" class="record-user-photo" />
                                        &nbsp;
                                        <span class="record-user-username">{{ user.username }}</span>
                                    </td>
                                    <td>{{ user.rating }}</td>

                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card" style="margin-top: 20px;">
                    <div class="card-body">
                        <h4 style="text-align:center">最近对局</h4>
                        <table class="table table-light table-hover" style="text-align:center">
                            <thead>
                                <tr>
                                    <th>A</th>
                                    <th>B</th>
                                    <th>结果</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="record in records" :key="record.record.id">
                                    <td>
                                        <img :src="record.a_photo" alt="" class="record-user-photo" />
                                        &nbsp;
                                        <span class="record-user-username">{{ record.a_username }}</span>
                                    </td>
                                    <td>
                                        <img :src="record.b_photo" alt="" class="record-user-photo" />
                                        &nbsp;
                                        <span class="record-user-username">{{ record.b_username }}</span>
                                    </td>
                                    <td>{{ record.result }}</td>
                                    <td>
                                        <button @click="open_record_content(record.record.id)" type="button"
                                            class="btn btn-outline-primary">回放</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>

import { useStore } from 'vuex';
import { ref } from 'vue';
import $ from 'jquery'
import router from '../router/index'
import IP from '../store/api'

export default {
    components: {

    },
    setup() {
        const store = useStore();
        let users = ref([]);
        let current_page = 1;
        let records = ref([]);

        const user_page = page => {
            current_page = page;
            $.ajax({
                url: IP.rank_list_api,
                data: {
                    page,
                },
                type: "get",
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                success(resp) {
                    users.value = resp.users;

                },

            });


        }
        user_page(current_page);

        const record_page = page => {
            current_page = page;
            $.ajax({
                url: IP.record_list_api,
                data: {
                    page,
                },
                type: "get",
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                success(resp) {
                    records.value = resp.records;

                },

            });


        }
        record_page(current_page);
        const stringTo2D = map => {
            let g = [];
            for (let i = 0, k = 0; i < 13; i++) {
                let line = [];
                for (let j = 0; j < 14; j++, k++) {
                    if (map[k] === '0') line.push(0);
                    else line.push(1);
                }
                g.push(line);
            }
            return g;
        }
        const open_record_content = recordId => {
            for (const record of records.value) {
                if (record.record.id === recordId) {
                    store.commit("updateIsRecord", true);
                    store.commit("updateGame", {
                        map: stringTo2D(record.record.map),
                        a_id: record.record.aid,
                        a_sx: record.record.asx,
                        a_sy: record.record.asy,
                        b_id: record.record.bid,
                        b_sx: record.record.bsx,
                        b_sy: record.record.bsy,
                    });
                    store.commit("updateSteps", {
                        a_steps: record.record.asteps,
                        b_steps: record.record.bsteps,
                    });
                    store.commit("updateRecordLoser", record.record.loser);
                    router.push({
                        name: "record_content",
                        params: {
                            recordId,
                        }
                    })
                    break;
                }
            }
        }
        const dark = () => {
            store.commit("updateBackgroundStatus","light");
        }
        const light = () => {
            store.commit("updateBackgroundStatus","dark");
         
        }
        return {
            records,
            open_record_content,
            users,
            user_page,
            record_page,
            light,
            dark,


        }
    }
}
</script>

<style scoped>
img.record-user-photo {
    width: 4vh;
    border-radius: 50%;
}
</style>